$(function () {
  // 监控区域效果
  (function () {
    // 实现动画效果
    // 1.为每个ul 追加它自身的li元素
    // $('.monitor .list > ul').append($('.monitor .list > ul').children('li').clone())
    let first = $('.monitor .content').eq(0).find('.list ul')
    first.append(first.children('li').clone())

    let second = $('.monitor .content').eq(1).find('.list ul')
    second.append(second.children('li').clone())

    // 单击监控区域的面板切换
    $('.monitor .tabs a').on('click', function () {
      // 样式切换
      $(this).addClass('active').siblings().removeClass('active')

      // 对应的内容面板切换
      let index = $(this).index()
      $('.monitor .content').eq(index).show().siblings('.content').hide()
    })
  })();

  // 添加饼图
  (function () {
    // 初始化,init方法的参数只能是dom元素
    let mychart = echarts.init($('.pie')[0])

    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: '面积模式',
          type: 'pie',
          radius: [10, 80],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' },
            { value: 30, name: 'rose 4' },
            { value: 28, name: 'rose 5' },
            { value: 26, name: 'rose 6' },
            { value: 22, name: 'rose 7' },
            { value: 18, name: 'rose 8' }
          ]
        }
      ]
    };

    // 通过选项进行图表的渲染
    mychart.setOption(option)
  })();

  // 用户统计
  (function () {
    // 初始化,init方法的参数只能是dom元素
    let mychart = echarts.init($('.bar')[0])

    // 封装单个item
    let item = {
      value: 1200,
      itemStyle: { color: 'red' },
      tooltip: { extraCssText: 'opacity:0' }
    }

    let option = {
      tooltip: {
        trigger: 'item',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      // 风格，通过它可以设置图表的大小
      grid: {
        left: '3%',
        right: '4%',
        bottom: '2%',
        top: '10%',
        containLabel: true
      },
      // 设置柱子的背景色
      color: {
        type: 'linear', // 线性渐变
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: 'yellow' // 0% 处的颜色
        }, {
          offset: 1, color: 'orange' // 100% 处的颜色
        }],
      },
      // 水平轴
      xAxis: [
        {
          type: 'category',
          data: ['上海', '广州', '北京', '深圳', '合肥', '', '...', '', '杭州', '厦门', '济南', '成都', '重庆'],
          axisTick: {
            alignWithLabel: true
          },
          // 设置水平轴标签文本的颜色
          axisLabel: {
            color: 'yellow',
            fontSize: 14,
            interval: 0,
            rotate: 45
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          // 设置水平轴标签文本的颜色
          axisLabel: {
            color: 'yellow',
            fontSize: 16
          }
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
        }
      ]
    };

    // 通过选项进行图表的渲染
    mychart.setOption(option)
  })();

  // 销量统计
  (function () {
    let mychart = echarts.init($('.line')[0])
    let option = {
      legend: {
        data: ['预期销售额', '实际销售额'],
        textStyle: {
          color: 'yellow',
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      // 网格，通过它可以设置图表的大小
      grid: {
        left: '3%',
        right: '4%',
        bottom: '4%',
        top: '25%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        // 设置水平轴标签文本的颜色
        axisLabel: {
          color: 'yellow',
          fontSize: 12
        },
      },
      yAxis: {
        type: 'value',
        // 设置水平轴标签文本的颜色
        axisLabel: {
          color: 'yellow',
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: '#444'
          }
        }
      },
      series: [{
        name: '预期销售额',
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: 'yellow'
        }
      }, {
        name: '实际销售额',
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        type: 'line',
        smooth: true,

        itemStyle: {
          color: 'red'
        }
      }]
    };
    mychart.setOption(option)


    let data = [
      {
        yellow: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        red: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      },
      {
        yellow: [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        red: [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      },
      {
        yellow: [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        red: [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      },
      {
        yellow: [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        red: [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      },
    ]
    $('.caption>a').on('click', function () {
      let myindex = $(this).index() - 1
      // console.log(index);
      let current = data[myindex]
      index = myindex
      $(this).addClass('active').siblings().removeClass('active')
      option.series[0].data = current.yellow
      option.series[1].data = current.red
      //重新渲染图表:修改了图表的配置之后,要让配置起作用必须重新渲染
      mychart.setOption(option)
    })

    let index = 0;
    let timeId;
    function getTimeId() {
      timeId = setInterval(() => {
        index++;
        if (index > data.length - 1) {
          index = 0;
        }
        $('.caption>a').eq(index).trigger('click')
      }, 2000)
    }
    getTimeId()
    $('.line').on('mouseenter', function () {
      clearInterval(timeId)
    })
    $('.line').on('mouseleave', function () {
      getTimeId()
    })
  })();

  // 订单销售
  (function () {
    // 1.定义数据
    var data = [
      { orders: '20,301,987', amount: '99834' },
      { orders: '301,987', amount: '9834' },
      { order: '1,987', amount: '3834' },
      { orders: '987', amount: '834' }
    ]

    // 定义索引，用于控制元素的样式切换  和  对应需要展示的数据
    let index = 0

    // 2.实现元素和数据的关联--获取到对应索引位置的数据
    $('.order .tabs > a').on('click', function () {
      // 2.0 切换样式
      $(this).addClass('active').siblings().removeClass('active')

      // 2.1 获取当前元素的索引，这个索引就是数据的索引
      let myindex = $(this).index()
      // 将索引重置为当前用户单击的索引
      index = myindex
      let current = data[myindex]

      // 3.为dom元素赋值
      $('.order_orders').text(current.orders)
      $('.order_count').text(current.amount)
    })

    // 自动触发第一个标签的单击事件
    $('.order .tabs > a').eq(0).trigger('click')

    // 添加定时器
    setInterval(() => {
      index++
      if (index > data.length - 1) {
        index = 0
      }
      // 元素的样式切换 
      $('.order .tabs > a').eq(index).addClass('active').siblings().removeClass('active')

      // 数据切换
      let current = data[index]

      // 3.为dom元素赋值
      $('.order_orders').text(current.orders)
      $('.order_count').text(current.amount)
    }, 2000);

  })();

  //图表
  (function () {
    let myChart = echarts.init($('.quarter .gauge')[0]);
    let option = {
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['80%', '100%'],
          avoidLabelOverlap: false,
          startAngle: 180,
          labelLine: {
            show: false
          },
          hoverOffset: 0,
          data: [
            {
              value: 75,
              itemStyle: {
                color: 'skyblue'
              },
              emphasis: {
                itemStyle: {
                  color: 'skyblue' // 鼠标上移没有高亮效果，因为高亮色和原始是同一个颜色
                }
              }
            },
            { value: 25 },
            {
              value: 100, itemStyle: {
                color: 'transparent'
              }
            }
          ]
        }
      ]
    };

    myChart.setOption(option);
  })()
})